<template>
<!--    门店管理  -->
    <div class="store">

<!--        全部商品 上架中 已下架  -->
        <div>
            <div style="margin-bottom: 10px">
                <el-radio-group v-model="radio2" size="medium" @input="changeStatus">
                    <el-radio-button label="全部商品" ></el-radio-button>
                    <el-radio-button label="上架中"></el-radio-button>
                    <el-radio-button label="已下架"></el-radio-button>
                </el-radio-group>
            </div>
        </div>

<!--        搜索  -->
        <div class="search">
            <div class="search_store">
                <p>门店名称:</p>
                <input type="text" v-model="searchData.name">
            </div>
            <div class="search_store">
                <p>门店手机号:</p>
                <input type="text" v-model="searchData.tel">
            </div>
            <div class="block">
                <span class="demonstration">提交日期:</span>
                <el-date-picker
                        v-model="submissionDate"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
            </div>
            <div class="search_button">
                <el-button type="primary" @click="searchStoreArr">搜索</el-button>
            </div>
        </div>

        <div>
            <div class="add_store">
                <el-button type="primary" @click="addNewStore">新增门店</el-button>
            </div>
        </div>

        <!--        表格 -->
        <el-table :cell-style="rowStyle"
                :data="storeData.list"
                border
                :header-cell-style="{'background-color':'#409EFF', color:'#fff'}"
                style="width: 100%">
            <el-table-column
                    fixed
                    prop="shopName"
                    label="门店"
                    align="center"
                    width="">
            </el-table-column>
            <el-table-column
                    prop="shopId"
                    label="id"
                    align="center"
                    width="">
            </el-table-column>
            <el-table-column
                    prop="shopPhone"
                    label="门店手机号"
                    align="center"
                    width="">
            </el-table-column>
            <el-table-column
                    prop="shopAddress"
                    label="门店地址"
                    align="center"
                    width="">
            </el-table-column>
            <el-table-column
                    prop="shopDescribe"
                    label="营业时间"
                    align="center"
                    width="">
            </el-table-column>
            <el-table-column
                    prop="shopCommunitySort"
                    label="关联小区"
                    align="center"
                    width="">
            </el-table-column>
            <el-table-column
                    prop="shopOrderCount"
                    label="订单总数"
                    align="center"
                    width="">
            </el-table-column>
            <el-table-column
                    prop="shopOrderCount"
                    label="提交方式"
                    align="center"
                    width="">
            </el-table-column>
            <el-table-column
                    prop="shopStatus"
                    label="状态"
                    align="center"
                    width="">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    align="center"
                    width="">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">门店管理</el-button>
                    <el-button type="text" size="small" @click="editStoreInformation(scope.row)">修改门店资料</el-button>
                </template>
            </el-table-column>
        </el-table>

<!--        分页器  -->
        <div class="block">
            <el-pagination @current-change="pageChange" :current-page="page"
                           layout="prev, pager, next"
                           :total="storeData.total">
            </el-pagination>
        </div>

<!--        弹窗内容  -->
        <div>
<!--            新增门店弹窗  -->
            <div>
                <el-dialog title="新增门店" :visible.sync="dialogNewStoreVisible">
                    <el-form :model="newStore">
                        <el-form-item label="门店名称" :label-width="'100px'">
                            <el-input v-model="newStore.shopName" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="门店头像" :label-width="'100px'">
                            <el-upload
                                    action=""
                                    :show-file-list="false"
                                    on-success=""
                                    before-upload="">
<!--                                <img v-if="newStore.shopImage" :src="newStore.shopImage">-->
                                <i class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="门店手机号" :label-width="'100px'">
                            <el-input v-model="newStore.shopPhone" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="所属地区" :label-width="'100px'">
                            <el-cascader
                                    clearable
                                    v-model="newStore.newAddress"
                                    :options="addressAll"
                                    :props="{value:'label'}">
                            </el-cascader>
                        </el-form-item>
                        <el-form-item :label-width="'100px'">
                            <el-input v-model="newStore.addressDetail" autocomplete="off" placeholder="请填写详细地址"></el-input>
                        </el-form-item>
                        <el-form-item label="门店坐标" :label-width="'100px'">
                            <el-button>获取位置</el-button>
                            <span style="margin-left: 10px">坐标位置为:{{newStore.positioon}}</span>
                        </el-form-item>
                        <el-form-item label="营业时间" :label-width="'100px'">
                            <el-input v-model="newStore.shopDescribe" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogNewStoreVisible = false">取 消</el-button>
                        <el-button type="primary" @click="confirmAddStore">确 定</el-button>
                    </div>
                </el-dialog>
            </div>

<!--            修改门店信息弹框  -->
            <div>
                <el-dialog title="新增门店" :visible.sync="dialogOldStoreVisible">
                    <el-form :model="oldStore">
                        <el-form-item label="门店名称" :label-width="'100px'">
                            <el-input v-model="oldStore.shopName" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="门店头像" :label-width="'100px'">
                            <el-upload
                                    action=""
                                    :show-file-list="false"
                                    on-success=""
                                    before-upload="">
                                <img v-if="oldStore.shopImage" :src="oldStore.shopImage">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="门店手机号" :label-width="'100px'">
                            <el-input v-model="oldStore.shopPhone" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="所属地区" :label-width="'100px'">
                            <el-cascader
                                    clearable
                                    v-model="oldAddress"
                                    :options="addressAll"
                                    :props="{value:'label'}">
                            </el-cascader>
                        </el-form-item>
                        <el-form-item :label-width="'100px'">
                            <el-input v-model="oldStore.shopAddress" autocomplete="off" placeholder="请填写详细地址"></el-input>
                        </el-form-item>
                        <el-form-item label="门店坐标" :label-width="'100px'">
                            <el-button>获取位置</el-button>
                            <span style="margin-left: 10px">坐标位置为:{{oldPosition}}</span>
                        </el-form-item>
                        <el-form-item label="营业时间" :label-width="'100px'">
                            <el-input v-model="oldStore.shopDescribe" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogOldStoreVisible = false">取 消</el-button>
                        <el-button type="primary" @click="confirmEditStore">确 定</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>

    </div>


</template>

<script>
    export default {
        name: "StoreManagement",
        data: function () {
            return {
                storeData: "",
                radio2: "全部商品",
                submissionDate: ['',''], // 提交日期
                page: 1,
                searchData: {
                    name: '',
                    tel: '',
                },
                addressAll: [],
                dialogNewStoreVisible: false,
                newStore: {   // 新增门店信息
                    shopName:"", // 门店名称
                    shopImage:"", // 门店图片
                    shopPhone: "", // 门店手机号
                    newAddress: [], // 省 市 县
                    addressDetail: "", // 详细地址
                    position: [], // 位置 经纬度
                    shopDescribe: "", // 营业时间
                },
                dialogOldStoreVisible: false,
                oldStore: {}, // 编辑门店的门店信息
                oldAddress: [], // 编辑门店的门店地址
                oldPosition: [], // 编辑门店的门店位置坐标
            }
        },
        created() {
            this.getDataSource();
            this.getAllProvinceAndCityList();
        },
        methods:{
            // 请求数据
            getDataSource(){
                this.axios.request("shop/querySearchShopList", {
                    params: {
                        pageNum: 1,
                        pageSize: 10,
                        phone: '',
                        keyword: '',
                        shopStatus: '',
                        startTime: '',
                        endTime: '',
                    }
                }).then((res) => {
                    this.storeData = res.data.data;
                    console.log(this.storeData)
                }).catch((err) => {
                    console.log(err)
                });
            },
            //获取省 市 县
            getAllProvinceAndCityList() {
                // 获取全国所有省份和城市的列表
                var that = this;
                this.$http
                    .get("https://restapi.amap.com/v3/config/district", {
                        // 高德地图的API
                        params: {
                            key: "dab57453101d48a50baa5b2088f29e7f", // 这个是申请的 Key，读者自行写入
                            keywords: "中国",
                            subdistrict: 3,
                            extensions: "base",
                        },
                    })
                    .then((response) => {
                        console.log(response.data)
                        for(let i = 0;i<response.data.districts[0].districts.length;i++){
                            let provinceMap = new Map();
                            provinceMap.value = response.data.districts[0].districts[i].adcode;   //区域编号
                            provinceMap.label = response.data.districts[0].districts[i].name;     //省名称
                            provinceMap.children = [];
                            that.addressAll.push(provinceMap);  //添加省份
                            for(let j = 0;j < response.data.districts[0].districts[i].districts.length;j++){
                                let cityMap = new Map()
                                cityMap.value = response.data.districts[0].districts[i].districts[j].adcode;   //区域编号
                                cityMap.label = response.data.districts[0].districts[i].districts[j].name;     //市名称
                                cityMap.children = [];
                                provinceMap.children.push(cityMap); //添加市
                                for(let k = 0;k <response.data.districts[0].districts[i].districts[j].districts.length;k++){
                                    let areaMap = new Map()
                                    areaMap.value = response.data.districts[0].districts[i].districts[j].districts[k].adcode;   //区域编号
                                    areaMap.label = response.data.districts[0].districts[i].districts[j].districts[k].name;     //区县名称
                                    cityMap.children.push(areaMap);   //添加区县
                                }
                            }
                        }
                    });
            },
            // 表格内容居中
            rowStyle(){
                return "text-align: center";
            },
            // 门店管理按钮 事件
            handleClick(row){
                // console.log(row);
                this.$router.push({path:"/bangmai/store/storeAdministration", query:row}).catch(()=>{});
            },
            // 点击页码切换页面数据内容
            pageChange(val){
                // console.log(val)
                this.page = val;
                this.axios.request("shop/querySearchShopList", {
                    params: {
                        pageNum: val,
                        pageSize: 10,
                        phone: '',
                        keyword: '',
                        shopStatus: '',
                        startTime: '',
                        endTime: '',
                    }
                }).then((res) => {
                    this.storeData = res.data.data;
                }).catch((err) => {
                    console.log(err)
                });
            },
            // 搜索按钮事件
            searchStoreArr(){
                this.axios.request("/shop/querySearchShopList", {
                    params: {
                        pageNum: 1,
                        pageSize: 10,
                        phone: this.searchData.tel,
                        keyword: this.searchData.name,
                        shopStatus: '',
                        startTime: this.submissionDate[0],
                        endTime: this.submissionDate[1],
                    }
                }).then((res) => {
                    this.storeData = res.data.data;
                    console.log(this.storeData)
                    // console.log(this.storeData.data.list)
                }).catch((err) => {
                    console.log(err)
                });
            },
            // 添加新门店
            addNewStore(){
                this.dialogNewStoreVisible = true;
            },
            // 确认添加门店
            confirmAddStore(){
                this.dialogNewStoreVisible = false;
                this.axios.post("/shop/addShop", {
                    shopAddress: this.newStore.addressDetail,
                    shopCity: this.newStore.newAddress[1],
                    shopDescribe: this.newStore.shopDescribe,
                    shopDistrict: this.newStore.newAddress[2],
                    shopImage: this.newStore.shopImage,
                    shopLatitude: this.newStore.position[0],
                    shopLongitude: this.newStore.position[1],
                    shopName: this.newStore.shopName,
                    shopPhone: this.newStore.shopPhone,
                    shopProvince: this.newStore.newAddress[0],
                }).then((res) => {
                    console.log(res.data)
                    this.getDataSource();
                }).catch((err) => {
                    console.log(err)
                });
            },
            //  修改门店信息事件  并获取门店信息
            editStoreInformation(row){
                this.dialogOldStoreVisible = true;
                this.oldStore = row;
                this.oldAddress[0] = row.shopProvince;
                this.oldAddress[1] = row.shopCity;
                this.oldAddress[2] = row.shopDistrict;
                this.oldPosition[0] = row.shopLatitude;
                this.oldPosition[1] = row.shopLongitude;
            },
            // 确认修改门店信息按钮事件
            confirmEditStore(){
                this.dialogOldStoreVisible = false;
                this.axios.post("/shop/modifyShop", {
                    addTime: this.oldStore.addTime,
                    concernStatus: this.oldStore.concernStatus,
                    distance: this.oldStore.distance,
                    salesVolume: this.oldStore.salesVolume,
                    shopAccount: this.oldStore.shopAccount,
                    shopAddress: this.oldStore.shopAddress,
                    shopCategoryList: this.oldStore.shopCategoryList,
                    shopCity: this.oldAddress[1],
                    shopCommunitySort: this.oldStore.shopCommunitySort,
                    shopDescribe: this.oldStore.shopDescribe,
                    shopDistrict: this.oldAddress[2],
                    shopGoodsList: this.oldStore.shopGoodsList,
                    shopId: this.oldStore.shopId,
                    shopImage: this.oldStore.shopImage,
                    shopLatitude: this.oldPosition[0],
                    shopLongitude: this.oldPosition[1],
                    shopName: this.oldStore.shopName,
                    shopOrderCount: this.oldStore.shopOrderCount,
                    shopPassword: this.oldStore.shopPassword,
                    shopPhone: this.oldStore.shopPhone,
                    shopProvince: this.oldAddress[0],
                    shopSort: this.oldStore.shopSort,
                    shopStatus: this.oldStore.shopStatus,
                    shopUserId: this.oldStore.shopUserId,
                }).then((res) => {
                    console.log(res.data)
                    this.getDataSource();
                }).catch((err) => {
                    console.log(err)
                });
            },
        }
    }
</script>

<style scoped>

    .store{
        width: 97%;
        padding: 1.5%;
        /*background-color: #8a69ff;*/
    }
    .search{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }
    .search .search_store{
        width: 280px;
        height: 50px;
        /*background-color: #2D93CA;*/
        margin-right: 10px;
    }
    .search_store>p{
        line-height: 50px;
        float: left;
        margin-right: 10px;
    }
    .search_store>input{
        width: 60%;
        line-height: 35px;
        float: left;
        margin-top: 7px;
        padding-left: 10px;
        outline: none;
        border-radius: 3px;
        border: 1px solid #dddddd;
    }
    .block{
        /*background-color: #00F7DE;*/
        margin-right: 20px;
    }
    .demonstration{
        margin-right: 10px;
        line-height: 50px;
    }
    .search_button{
        line-height: 50px;
    }
    .add_store{
        margin: 20px 0;
    }

</style>